// 多选题
import React, { useState } from "react";

import {
  StyleSheet,
  ScrollView,
  Text,
  View,
  Modal,
  TouchableWithoutFeedback,
  TouchableOpacity,
  Image,
  Dimensions,
  TextInput,
} from "react-native";
import SetSkip from "../SetSkip";
import { AntDesign } from "@expo/vector-icons";

let submitQues2, Question2;

const ChoiceQues = ({ question, setIsSkip }) => {
  // console.log("要编辑的题目---", question);

  const QuesType = ["单选题", "多选题"];
  const IsNeed = ["是", "否"];
  const [TypeValue, setTypeValue] = useState(question.type - 2);
  const [needAnswer, setNeedAnswer] = useState(question.needAnswer ? 0 : 1);
  const [title, setTitle] = useState(question.title);
  const [options, setOptions] = useState(question.options);
  const [answer, setAnswer] = useState(question.answer);
  const [optionflag, setOptionFlag] = useState(question.optionFlag);
  const [skipType, setSkipType] = useState(question.skipType);
  const [relation, setRelation] = useState(question.relation);
  const [skipDetail, setSkipDetail] = useState(question.skipDetail);
  const [isSetting, setIsSetting] = useState(false); // 是否正在设置跳过

  // if (isEdit != -1) {
  //   setTypeValue(question.type - 2);
  //   setNeedAnswer(question.type - 2);
  //   setTitle(question.title);
  //   setOptions(question.options);
  // }

  const deleteOption = async (index) => {
    if (TypeValue + 2 == 2) {
      await setOptions((preOptions) => {
        return preOptions.filter((item, t_index) => index !== t_index);
      });
      await setOptionFlag((preFlag) => {
        return preFlag.filter((item, t_index) => index !== t_index);
      });
    } else if (TypeValue + 2 == 3) {
      await setOptions((preOptions) => {
        return preOptions.filter((item, t_index) => index !== t_index);
      });
      await setAnswer((preAnswer) => {
        return preAnswer.filter((item, t_index) => index !== t_index);
      });
      await setOptionFlag((preFlag) => {
        return preFlag.filter((item, t_index) => index !== t_index);
      });
    }

    // console.log(options);
  };

  submitQues2 = async () => {
    let t_options = options;
    let t_answer = answer;
    options.map((option, index) => {
      if (option == "") {
        t_options.splice(index, 1);
        t_answer.splice(index, 1);
      }
    });
    // console.log(t_options);
    // console.log("skipType---", skipType);
    // console.log("skipDetail---", skipDetail);
    Question2 = {
      type: TypeValue + 2, // 2：单选题
      needAnswer: needAnswer ? 0 : 1,
      title: title,
      visible: true,
      options: t_options,
      answer: TypeValue + 2 == 2 ? -1 : t_answer,
      optionFlag: optionflag,
      skipType: skipType,
      relation: relation,
      skipDetail: skipDetail,
    };

    console.log("打印题目看看---", Question2);
  };

  const handleSkip = () => {
    setIsSetting(false);
    setIsSkip(false);
    // console.log("skipType---", skipType);
    // console.log("skipDetail---", skipDetail);
  };

  return (
    <View style={styles.borderView}>
      {!isSetting ? (
        <ScrollView>
          <View>
            <View style={styles.group}>
              <View style={{ flexDirection: "row", marginBottom: 10 }}>
                <Text style={{ color: "red" }}>* </Text>
                <Text style={{ color: "#aaa" }}>标题</Text>
              </View>
              <TextInput
                style={styles.inputBox}
                multiline={true}
                maxLength={500}
                value={title}
                placeholder="请输入标题"
                onChangeText={(text) => {
                  setTitle(text);
                }}
              ></TextInput>
            </View>
            <View style={{ height: 10, backgroundColor: "#eee" }}></View>
            <View style={styles.group}>
              <View
                style={{
                  flexDirection: "row",
                  justifyContent: "space-between",
                  marginBottom: 10,
                }}
              >
                <Text style={{ color: "#aaa" }}>选项</Text>
                <Text style={{ color: "#aaa" }}>是否设置填空</Text>
              </View>
              <View>
                {options.map((option, index) => {
                  return (
                    <View style={styles.optionView} key={index}>
                      <TouchableOpacity onPress={() => deleteOption(index)}>
                        <View style={{ marginLeft: 5 }}>
                          <AntDesign name="minuscircle" size={18} color="red" />
                        </View>
                      </TouchableOpacity>
                      <TextInput
                        style={styles.optionInput}
                        multiline={true}
                        maxLength={500}
                        value={options[index]}
                        placeholder="请输入选项"
                        onChangeText={(text) => {
                          setOptions((preOptions) => {
                            return preOptions.map((item, t_index) => {
                              return index == t_index ? text : item;
                            });
                          });
                        }}
                      ></TextInput>
                      <TouchableOpacity
                        onPress={() => {
                          let t_flag = optionflag;
                          t_flag[index] = [!t_flag[index][0], ""];
                          setOptionFlag([...t_flag]);

                          console.log(optionflag);
                        }}
                      >
                        <AntDesign
                          name="checkcircle"
                          size={19}
                          color={optionflag[index][0] ? "#41C3EE" : "#aaa"}
                        />
                      </TouchableOpacity>
                    </View>
                  );
                })}
                <TouchableOpacity
                  onPress={() => {
                    if (TypeValue + 2 == 2) {
                      setOptions([...options, ""]);
                      setOptionFlag([...optionflag, [false, ""]]);
                    } else if (TypeValue + 2 == 2) {
                      setOptions([...options, ""]);
                      setAnswer([...answer, false]);
                      setOptionFlag([...optionflag, [false, ""]]);
                    }
                  }}
                >
                  <View
                    style={[styles.optionView, { borderBottomColor: "#fff" }]}
                  >
                    <View style={{ marginLeft: 5 }}>
                      <AntDesign name="pluscircle" size={18} color="#41C3EE" />
                    </View>
                    <Text
                      style={{
                        color: "#41C3EE",
                        paddingLeft: 20,
                        marginTop: 5,
                      }}
                    >
                      添加选项
                    </Text>
                  </View>
                </TouchableOpacity>
              </View>
            </View>
            <View style={{ height: 10, backgroundColor: "#eee" }}></View>
            <View style={styles.group}>
              <View style={{ flexDirection: "row", marginBottom: 10 }}>
                <Text style={{ color: "#aaa" }}>设置</Text>
              </View>
              <View>
                <View
                  style={[
                    styles.optionView,
                    { justifyContent: "space-between", paddingBottom: 10 },
                  ]}
                >
                  <View style={{ marginLeft: 5 }}>
                    <Text>题目类型</Text>
                  </View>
                  <View
                    style={{
                      flexDirection: "row",
                      flexWrap: "wrap",
                    }}
                  >
                    {QuesType.map((tag, index) => {
                      return (
                        <TouchableOpacity
                          key={index}
                          onPress={() => {
                            if (TypeValue + 2 == 2) {
                              setAnswer([-1, ""]);
                            } else if (TypeValue + 2 == 3) {
                              let t_answer = [];
                              for (let i = 0; i < options.length; i++) {
                                t_answer.push(false);
                              }
                              setAnswer(t_answer);
                            }
                            setTypeValue(index);
                          }}
                        >
                          <View
                            style={
                              index == TypeValue
                                ? styles.optionsSelected
                                : styles.optionsView
                            }
                          >
                            <Text
                              style={
                                index == TypeValue
                                  ? styles.textSelected
                                  : styles.optionsText
                              }
                            >
                              {tag}
                            </Text>
                          </View>
                        </TouchableOpacity>
                      );
                    })}
                  </View>
                </View>
                <View
                  style={[
                    styles.optionView,
                    { justifyContent: "space-between", paddingBottom: 10 },
                  ]}
                >
                  <View style={{ marginLeft: 5 }}>
                    <Text>是否必答题</Text>
                  </View>
                  <View
                    style={{
                      flexDirection: "row",
                      flexWrap: "wrap",
                    }}
                  >
                    {IsNeed.map((tag, index) => {
                      return (
                        <TouchableOpacity
                          key={index}
                          onPress={() => {
                            setNeedAnswer(index);
                          }}
                        >
                          <View
                            style={
                              index == needAnswer
                                ? styles.optionsSelected
                                : styles.optionsView
                            }
                          >
                            <Text
                              style={
                                index == needAnswer
                                  ? styles.textSelected
                                  : styles.optionsText
                              }
                            >
                              {tag}
                            </Text>
                          </View>
                        </TouchableOpacity>
                      );
                    })}
                  </View>
                </View>
              </View>
              <TouchableOpacity
                onPress={() => {
                  setIsSetting(true);
                  setIsSkip(true);
                  console.log("处理跳过---", isSetting);
                }}
              >
                <View
                  style={[
                    styles.optionView,
                    {
                      justifyContent: "space-between",
                      paddingBottom: 15,
                      marginTop: 5,
                    },
                  ]}
                >
                  <View style={{ marginLeft: 5 }}>
                    <Text>跳题设置</Text>
                  </View>
                  <View
                    style={{
                      flexDirection: "row",
                      flexWrap: "wrap",
                    }}
                  >
                    <Text style={{ color: "#bbb" }}>
                      {skipType == 0 ? "未设置" : "已设置"}
                    </Text>
                    <Text
                      style={{ color: "#bbb", marginRight: 13, marginLeft: 3 }}
                    >
                      {">"}
                    </Text>
                  </View>
                </View>
              </TouchableOpacity>
            </View>
          </View>
        </ScrollView>
      ) : (
        <View style={{ height: "100%" }}>
          <SetSkip
            quesType={TypeValue + 2}
            options={options}
            skipType={skipType}
            relation={relation}
            skipDetail={skipDetail}
            setRelation={(relation) => {
              setRelation(relation);
            }}
            setSkipDetail={(detail) => {
              setSkipDetail(detail);
            }}
            setSkipType={(index) => {
              setSkipType(index);
            }}
            handleSkip={() => {
              handleSkip();
            }}
          ></SetSkip>
        </View>
      )}
    </View>
  );
};

const styles = StyleSheet.create({
  borderView: {
    // padding: 5,
    // justifyContent: "center",
    // backgroundColor: "#eee",
    height: "100%",
  },
  group: {
    padding: 15,
    backgroundColor: "#fff",
    paddingLeft: "5%",
    paddingRight: "5%",
  },
  inputBox: {
    borderColor: "#ddd",
    borderWidth: 1,
    // height: 100,
    borderRadius: 3,
    padding: 10,
    paddingTop: 15,
    paddingBottom: 20,
  },
  optionInput: {
    // borderColor: "#ddd",
    // borderWidth: 1,
    // height: 100,
    width: "75%",
    borderRadius: 3,
    padding: 7,
    paddingLeft: 10,
    paddingRight: 10,
    // paddingTop: 15,
    // paddingBottom: 20,
    marginLeft: 10,
    marginRight: "5%",
  },
  optionView: {
    flexDirection: "row",
    marginBottom: 12,
    alignItems: "center",
    borderBottomColor: "#ddd",
    borderBottomWidth: 1,
  },
  optionsView: {
    borderRadius: 14,
    marginTop: 5,
    padding: 4,
    paddingLeft: 10,
    paddingRight: 10,
    // backgroundColor: "#51bfe5",
    backgroundColor: "#fff",
    marginRight: 10,
    elevation: 4, //设置阴影角度，通过这个设置有无阴影
    shadowOffset: {
      // 设置阴影偏移量
      width: 0,
      height: 0,
    },
    shadowRadius: 4, // 设置阴影模糊半径
    shadowOpacity: 0.5, // 设置阴影的不透明度
    shadowColor: "gray", // 设置阴影色
  },
  optionsSelected: {
    borderRadius: 14,
    marginTop: 5,
    padding: 4,
    paddingLeft: 10,
    paddingRight: 10,
    marginRight: 10,
    backgroundColor: "#41C3EE",
  },
  textSelected: {
    color: "#fff",
  },
  optionsText: {
    color: "#000",
  },
});

export default ChoiceQues;
export { submitQues2, Question2 };
